<template>
  <div :class="{ hidden: !selfShow }" id="bg">
    <div
      style="
        width: 950px;
        padding-bottom: 30px;
        margin: 180px auto;
        background: #ffffff;
        border-radius: 10px;
      "
    >
      <div class="title-header">
        <h2 style="color: #ffffff; font-size: 30px">订单列表</h2>
        <span class="s1 el-icon-close" @click="onClose"></span>
      </div>
      <div style="margin: 35px 25px">
        <el-table :data="orderList" border style="width: 900px">
          <el-table-column
            prop="createDate"
            label="时间"
            width="220"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column
            prop="orderNo"
            label="订单编号"
            width="390"
            header-align="center"
            align="center"
          ></el-table-column>
          <el-table-column label="操作" header-align="center" align="center">
            <template slot-scope="scope">
              <el-button
                type="text"
                size="normal"
                style="padding: 5px"
                @click="load(scope.row.status, scope.row.orderNo)"
                >查看订单
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </div>
    <my-slot
      :myData="myData"
      :resourceTotal="resourceTotal"
      v-on:listenChild2="showChildMsg2"
      :showCommonText="showCommonText"
      :showThirdText="showThirdText"
      :showCustomText="showCustomText"
    ></my-slot>
  </div>
</template>

<script>
import bus from "../../assets/eventBus";
import ajax from "../../common/ajax";
import api from "../../common/api";
import util from "../../common/util";
import MySlot from "../../components/book-order/MySlot";

let userId;
let pressId;
let orderType;

export default {
  name: "DetailSlot",
  props: ["orderList"],
  components: { MySlot },
  data() {
    return {
      selfShow: false,
      myData: null,
      resourceTotal: 0,
      showCustomText: false,
      showThirdText: false,
      showCommonText: false,
    };
  },
  created() {},
  mounted() {
    let that = this;
    bus.$on("showOrderNum", function () {
      that.selfShow = true;
    });
  },
  methods: {
    showChildMsg2() {
      this.$emit("listenCustom2");
      // this.myIndex=0
    },

    /**
     * 订单详情基本信息时间格式转换
     */
    // loadDate() {
    //   this.myData.createDate = util.formate(this.myData.createDate);
    // },
    /**
     * 资源费用虚拟价格计算
     */
    // getData() {
    //   let t = 0;
    //   if (this.myData.responseAreditorBookOrderDetailList !== null) {
    //     this.myData.responseAreditorBookOrderDetailList.forEach((el) => {
    //       if (el.resourceSource !== 3) {
    //         t += el.resourcePrice;
    //       }
    //     });
    //     this.resourceTotal = t;
    //   }
    // },
    /**
     * 关闭弹窗
     */
    onClose() {
      this.selfShow = false;
    },

    /**
     * 打开已完成图书订单详情
     */
    load(id, id2) {
      let that = this;
      bus.$emit("showClause", id, id2);
      ajax.get({
        url: api.orders.routeName + api.orders.children.orderNo + id2,
        success: function (res) {
          that.myData = res;
          console.log(res);
          // that.loadDate();
        //   if (that.myData.responseAreditorBookOrderDetailList !== null) {
        //     // that.getData();
        //     that.showCustomText = false;
        //     that.showThirdText = false;
        //     that.showCommonText = false;
        //     that.myData.responseAreditorBookOrderDetailList.forEach((el) => {
        //       if (el.resourceSource === 4) {
        //         that.showCustomText = true;
        //       }
        //       if (el.resourceSource === 2) {
        //         that.showThirdText = true;
        //       }
        //       if (el.resourceSource === 1) {
        //         that.showCommonText = true;
        //       }
        //     });
        //   } else {
        //     that.resourceTotal = 0;
        //   }
        },
        error(e) {
          console.log(e);
        },
      });
    },
  },
};
</script>

<style scoped>
h2 {
  font-size: 20px;
  margin-left: 430px;
}

.s1 {
  color: #ffffff;
  font-size: 26px;
  float: right;
  margin-top: 5px;
  margin-left: 335px;
}

.s1:hover {
  cursor: pointer;
}

.hidden {
  display: none;
}

#bg {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  top: 0;
  z-index: 999;
  overflow-y: auto;
}

.title-header {
  display: flex;
  flex-direction: row;
  height: 55px;
  background: #4381e6;
  border-top-right-radius: 10px;
  border-top-left-radius: 10px;
  padding-top: 25px;
}
</style>
